import type { APIContext, GetStaticPathsResult } from "astro";
import { getCollection, getEntryBySlug } from "astro:content";
import satori, { SatoriOptions } from "satori";
import { html } from "satori-html";
import { Resvg } from "@resvg/resvg-js";
import siteConfig from "@/site-config";
import { getFormattedDate } from "@/utils";
const monoFontReg = await fetch(
"https://api.fontsource.org/v1/fonts/roboto-mono/latin-400-normal.ttf"
);
const monoFontBold = await fetch(
"https://api.fontsource.org/v1/fonts/roboto-mono/latin-700-normal.ttf"
);
const ogOptions: SatoriOptions = {
width: 1200,
height: 630,
// debug: true,
embedFont: true,
fonts: [
{
name: "Roboto Mono",
data: await monoFontReg.arrayBuffer(),
weight: 400,
style: "normal",
},
{
name: "Roboto Mono",
data: await monoFontBold.arrayBuffer(),
weight: 700,
style: "normal",
},
],
};
const markup = (title: string, pubDate: string, description: string) => html`
${pubDate}
${title}
${description}
`;
export async function get({ params: { slug } }: APIContext) {
const post = await getEntryBySlug("post", slug!);
const title = post?.data.title ?? siteConfig.title;
const postDate = getFormattedDate(post?.data.publishDate ?? Date.now(), {
weekday: "long",
});
const description = post?.data.description ?? siteConfig.title;
const svg = await satori(markup(title, postDate, description), ogOptions);
const png = new Resvg(svg).render().asPng();
return {
body: png,
encoding: "binary",
};
}
export async function getStaticPaths(): Promise {
const posts = await getCollection("post");
return posts.filter(({ data }) => !data.ogImage).map(({ slug }) => ({ params: { slug } }));
}